<template>
  <div class="header">
      <div class="header-logo"></div>
      <div class="header-screen"></div>
      <div class="header-cascade"></div>
      <div class="header-person"></div>
      <div class="header-python"></div>
      <div class="header-vue"></div>
      <div class="header-react"></div>
      <div class="header-phone"></div>
      <div class="header-phone-wolpe"></div>
      <div class="header-bug"></div>
      <div class="header-coffee"></div>
      <div class="header-year"></div>
      <div class="header-title"></div>
  </div>
</template>

<script lang="ts"></script>

<style lang="less">
.header {
  width: 100%;
  height: 259.5px;
  position: relative;
  .bg-pos {
      background-size: contain;
      position: absolute;
  }
  .z-index-11 {
      z-index: 11;
  }
  .z-index-13 {
      z-index: 13;
  }
  .z-index-14 {
      z-index: 14;
  }
  .header-logo{
      background: url('');
      .bg-pos;
      width: 77px;
      height: 25px;
      left: 0;
      top: 0;
  }
  .header-screen {
      width: 194.5px;
      height: 137px;
      left: 147px;
      top: 6.5px;
      background-image: url('../assets/header_screen.png');
      .bg-pos;
      .z-index-11;
  }
  .header-cascade {
      width: 200.5px;
      height: 89.5px;
      left: 121.5px;
      top: 22.5px;
      background-image: url('../assets/header-cascade.png');
      .bg-pos;
      .z-index-11;
  }
  .header-person {
      background-size: cover;
      z-index: 13;
      background-repeat: no-repeat;
      position: absolute;
      width: 169px;
      height: 157px;
      left: 160.5px;
      top: 17px;
      background-image: url('../assets/header-person.png');
  }
  .header-python {
      background-image: url('');
      width: 26.5px;
      height: 26.5px;
      left: 44.5px;
      top: 64.5px;
      .bg-pos;
      .z-index-13;
  }
  .header-vue {
       .bg-pos;
      .z-index-13;
      background-image: url('');
      width: 31.5px;
      height: 27.5px;
      left: 94.5px;
      top: 48px;
  }
  .header-react {
      .bg-pos;
      .z-index-13;
      width: 39.5px;
      height: 35px;
      left: 105px;
      top: 79px;
      background-image: url('');
  }
  .header-phone {
      .bg-pos;
      .z-index-13;
      background-repeat: no-repeat;
      width: 20px;
      height: 22px;
      left: 149px;
      top: 21.5px;
      background-image: url('');  
  }
  .header-phone-wolpe {
      .bg-pos;
      .z-index-13;
      background-repeat: no-repeat;
      width: 33px;
      height: 30.5px;
      left: 199px;
      top: 2px;
      background-image: url('');
  }
  .header-bug {
      .bg-pos;
      .z-index-13;
      background-repeat: no-repeat;
      width: 25.5px;
      height: 25.5px;
      left: 288.5px;
      top: 18.5px;
      background-image: url('');
  }
  .header-coffee {
      .bg-pos;
      .z-index-13;
      background-repeat: no-repeat;
      width: 25.5px;
      height: 23px;
      left: 300.5px;
      top: 59px;
  }
  .header-year-title {
      .bg-pos;
      .z-index-14;
       background-repeat: no-repeat;
       left: 0;
  }
  .header-year {
      .header-year-title;
      width: 149.5px;
      height: 35px;
      top: 129.5px;
      color: gold;
      background-image: url('');
  }
  .header-title {
      .header-year-title;
      width: 345px;
      height: 75.5px;
      top: 168.5px;
      background-image: url('../assets/header-title.png');
  }
}
@media screen and(min-width: 960px) {
  .header {
    width: 960px;
    height: 500px;
    .header-logo {
        width: 92.5px;
        height: 30px;
    }
    .header-screen {
        width: 402px;
        height: 283.5px;
        left: 547.5px;
        top: 18.5px;
    }
    .header-cascade {
        width: 411.5px;
        height: 183px;
        left: 496.5px;
        top: 53px;
    }
    .header-person {
        left: 584.5px;
        top: 55px;
        width: 306px;
        height: 436.5px;
        background-image: url('../assets/header-person-web.png');
    }
    .header-python {
        left: 635px;
        top: 58px;
        width: 64px;
        height: 63px;
    }
    .header-vue {
        left: 525.5px;
        top: 14px;
        width: 75px;
        height: 75px;
        background-image: url('');
    }
    .header-react {
        left: 491.5px;
        top: 111px;
        width: 96px;
        height: 86px;
    }
    .header-phone {
        background-image: url('');
        left: 858px;
        top: 72px;
        width: 54px;
        height: 49px;
    }
    .header-phone-wolpe {
        left: 700px;
        top: -32px;
        width: 98px;
        height: 93px;
        background-image: url('');
    }
    .header-bug {
        width: 62px;
        height: 62px;
        left: 520px;
        top: 300px;
    }
    .header-coffee{
        left: 820px;
        top: 200px;
        width: 79px;
        height: 70px;
    }
    .header-year {
        left: 1px;
        top: 58px;
        width: 205px;
        height: 48.5px;
    }
    .header-title {
        left: 1px;
        top: 111.5px;
        width: 475px;
        height: 104px;
    }
  }
}
</style>
